// 主题管理模块 - 简化版，只保留亮色和暗色主题

// 获取本地存储的主题设置或使用默认主题
const getSavedTheme = () => {
  try {
    return localStorage.getItem('app-theme') || 'light' // 默认主题为light
  } catch (error) {
    console.error('获取主题设置失败:', error);
    return 'light';
  }
}

// 主题配置 - 只保留亮色和暗色
const themeConfig = {
  light: { label: '亮色主题', icon: 'el-icon-sunny' },
  dark: { label: '暗色主题', icon: 'el-icon-moon' }
};

const state = {
  currentTheme: getSavedTheme(),
  availableThemes: Object.keys(themeConfig).map(key => ({
    name: key,
    label: themeConfig[key].label,
    icon: themeConfig[key].icon
  }))
}

const mutations = {
  SET_THEME: (state, theme) => {
    try {
      state.currentTheme = theme;
      // 保存到本地存储
      localStorage.setItem('app-theme', theme);
      
      // 更新文档根元素的data-theme属性
      document.documentElement.setAttribute('data-theme', theme);
    } catch (error) {
      console.error('设置主题失败:', error);
    }
  }
}

const actions = {
  // 初始化主题
  initTheme({ commit, state }) {
    commit('SET_THEME', state.currentTheme)
  },
  
  // 切换主题
  changeTheme({ commit }, theme) {
    // 添加过渡中的标记类
    document.documentElement.classList.add('theme-transitioning');
    
    // 延迟应用新主题，让过渡效果有时间启动
    setTimeout(() => {
      commit('SET_THEME', theme);
      
      // 过渡完成后移除标记类
      setTimeout(() => {
        document.documentElement.classList.remove('theme-transitioning');
      }, 600);
    }, 50);
  }
}

const getters = {
  currentTheme: state => state.currentTheme,
  availableThemes: state => state.availableThemes
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
} 